<template>
	<cl-page statusBarBackground="#fff" background-color="#F1F1F1" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('bill.message.title')"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="list mt30">
				<view
					class="item flex flex-between align-center"
					v-for="(item, index) in 5"
					@click="router.push('/pages/user/bill/msgdetail')"
				>
					<view>
						<view class="t1">{{
							cache.lang == "zh"
								? "您本月信用账单已送到"
								: "Your credit statement for this month has arrived"
						}}</view>
						<view class="t2">{{
							cache.lang == "zh"
								? "2019年1月信用账单1999.00元"
								: "January 2019 credit bill 1,999.00 yuan"
						}}</view>
						<view class="t3">2019-01-01 10:20:01</view>
					</view>
					<cl-icon name="arrow-right" color="#C7C7CC" size="44rpx"></cl-icon>
				</view>
			</view>
			<cl-loadmore
				background-color="#f1f1f1"
				:loading="false"
				:finish="true"
				:text="$t('loadmore.text')"
				:loading-text="$t('loadmore.loadingText')"
				:finish-text="$t('loadmore.finishText')"
			></cl-loadmore>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user, cache } = useStore();
const ui = useUi();
const app = useApp();

const more = () => {
	router.push("/pages/user/callingCard/edit");
};
</script>

<style lang="scss" scoped>
.page-info {
	.list {
		width: 100%;
		background: #ffffff;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.item {
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;
			&:last-child {
				border-bottom: none;
			}
			.t1 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 34rpx;
				color: #333333;
			}
			.t2 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				margin-top: 10rpx;
			}
			.t3 {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.imgList {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;

		.item {
			width: 330rpx;

			.img {
				height: 240rpx;
				width: 100%;
				border-radius: 10rpx;
			}

			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 32rpx;
				border-left: 4rpx solid #1881f7;
				text-indent: 16rpx;
				margin-top: 20rpx;
			}
		}
	}
}
</style>
